<script setup>
import { useRoute } from 'vue-router'
import {ref} from "vue";

const route = useRoute()

const vFocus = {
  mounted: (el) => el.focus()
}
const props = defineProps(["datas","attr","currentindex","currentstate","isdate"])

function aaa(obj){
  obj.isshow = true
}
function showfn(obj){
  return obj.isshow
}
function bbb(obj) {
  obj.isshow = false
  fetch(`http://127.0.0.1:5000/updatefirstli?id=${obj.id}&title=${obj.title}`)
}

function change(item){
  if (item.id == route.params.id){

  }
}
</script>

<template>


  <ul>
    <li class="li1" v-for="(item,index) in props.datas" @dblclick="aaa(item)" @click="$emit('aaa-bbb',index)">
      <el-icon class="ic"><Operation /></el-icon>
      <input v-model="item.title" v-if="showfn(item)" v-focus @blur="bbb(item)">
      <RouterLink v-else :to="'/l2/'+item.id+'/'+props.isdate+'/'+props.currentstate"><el-text  class="mx-1" :type="item.id == route.params.id?'danger':'primary'">{{item.title}}</el-text></RouterLink>
      <el-icon class="ic" @click="$emit('del',index)"><Delete /></el-icon>
    </li>
  </ul>

</template>

<style scoped>
ul li{
  margin: 0;padding: 10px;
  list-style: none;
  display: flex;
  justify-content: left;
  align-items: center;
}
input{
  width: 85%;
}
ul{
  margin: 0;padding: 0;
}

</style>